<template>
    <view class="account-setting" v-for="item in settingList" :key="item.id">
        <text class="setting-title">{{ item.title }}</text>
        <view class="setting-card">
            <view
                v-for="listItem in item.list"
                :key="listItem.id"
                class="card-account"
                @click="handleNavigate(listItem)"
            >
                <han-icon :name="listItem.icon" />
                <text class="card-title">{{ listItem.title }}</text>
                <han-icon name="advance" size="24" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { SETTING_LIST } from '@/util/config/setting.config.js';
import { useUserStore } from '../../../../../stores/userStores.js';
const settingList = ref(SETTING_LIST);
const userStore = useUserStore;

// 处理退出账号
const handleLogout = () => {
    uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        success(res) {
            if (res.confirm) {
                userStore.clearUserData;
                // 执行退出登录逻辑
                uni.reLaunch({
                    url: '/pages/login/login'
                });
            }
        }
    });
};

// 跳转逻辑
const handleNavigate = (item) => {
    if (item.action === 'logout') {
        handleLogout();
        return;
    }
    uni.navigateTo({ url: item.path });
};
</script>

<style lang="scss">
.account-setting {
    padding: 20rpx 0;

    .setting-title {
        font-size: $han-font-size-sm;
        font-weight: 700;
        color: $han-global-secondary-font-color;
    }

    .setting-card {
        margin-top: 10rpx;
        border: 1rpx solid $han-global-border-color;
        border-radius: $han-border-radius-md;

        .card-account {
            display: flex;
            align-items: center;
            height: 70rpx;
            padding: 0 20rpx;
            transition: background 0.3s;

            // 为除最后一项外添加边框
            &:not(:last-child) {
                border-bottom: 1rpx solid $han-global-border-color;
            }

            &:active {
                background: rgba($han-secondary-color, 0.1);
            }

            .card-title {
                font-size: $han-font-size-base;
                color: $han-global-primary-font-color;
                margin-left: 20rpx;
                flex: 1;
            }
        }
    }
}
</style>
